/* switch */

.active_uni_comps_operate {
  padding: 5px 0;
}
.uni_operate_direct {
  opacity: 0.7;
}

.auc_operate_direct_dragList {
  --switch_width: 30px;
  --switch_height: calc(var(--switch_width) * 0.52);
  --switch_padding: calc(var(--switch_height) / 10);
  --slid_width: calc(var(--switch_height) - var(--switch_padding) * 2);
  --slid_height: var(--slid_width);
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

.aodd_switch {
  position: relative;
  display: inline-block;
  width: var(--switch_width);
  height: var(--switch_height);
}

.aodd_slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

.auc_operate_direct_dragList:hover,
.auc_operate_direct_dragList[active='true'] {
  opacity: 1 !important;
}

.aodd_label {
  cursor: pointer;
  vertical-align: text-bottom;
}

.aodd_slider:before {
  content: '';

  position: absolute;

  width: var(--slid_width);
  height: var(--slid_height);

  left: var(--switch_padding);
  top: var(--switch_padding);

  background-color: white;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

#use_direct_dragList:checked + .aodd_slider {
  background-color: #2195f3;
}

/* input:focus + .slider {
  box-shadow: 0 0 1px #2195f37a;
}  */

#use_direct_dragList:checked + .aodd_slider:before {
  -webkit-transform: translateX(
    calc(var(--switch_width) - var(--switch_height))
  );
  -ms-transform: translateX(calc(var(--switch_width) - var(--switch_height)));
  transform: translateX(calc(var(--switch_width) - var(--switch_height)));
}

/* Rounded sliders */
.aodd_slider {
  border-radius: calc(var(--switch_height) / 2);
}

.aodd_slider:before {
  border-radius: calc(var(--slid_height) / 2);
}
